<template>
    <div class="users">
        <template>
            <el-table ref="multipleTable" :border="true" :data="userData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="username" label="用户名" width="120">
                </el-table-column>
                <el-table-column prop="mobile" label="电话" width="120">
                </el-table-column>
                <el-table-column prop="isDelete" :formatter='formatter' label="状态" width="120">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button :type="scope.row.isDelete===1?'danger':'success'" @click='disableUser(scope.row)'>{{msg}}</el-button>
                    </template>

                </el-table-column>
            </el-table>
        </template>
    </div>
</template>

<script>
import { getUserList, setDisUser } from '@/api/index'
export default {
  data () {
    return {
      userData: [],
      msg: '禁用'
    }
  },
  methods: {
    toggleSelection (rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    disableUser (row) {
      if (row.isDelete === 1) {
        setDisUser({ id: row.id, isDelete: 0 }).then(res => {
          this.init()
          this.msg = '启用'
        })
      } else if (row.isDelete === 0) {
        setDisUser({ id: row.id, isDelete: 1 }).then(res => {
          this.init()
          this.msg = '禁用'
        })
      }
    },
    formatter (row) {
      if (row.isDelete === 1) {
        return '已启用'
      } else if (row.isDelete === 0) {
        return '已禁用'
      }
    },
    init () {
      getUserList({ page: this.page, pageSize: this.pageSize }).then(res => {
        this.userData = res.rows
      })
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped>
</style>
